import React, { Component } from 'react'
import Footer from './components/Footer'
import Header from './components/Header'
import Main from './components/Main'
import request from './utils/request'

export default class App extends Component {
  state = {
    list: []
  }
  // 调用获取数据的接口
  getList = async () =>{
    const { data: list } = await request.get('/')
    this.setState({ list })
  }
  render () {
    const { list } = this.state
    return (
      <section className='todoapp'>
        {/* Header */}
        <Header getList={this.getList} />
        {/* Main */}
        <Main list={list}  getList={this.getList} />
        {/* Footer */}
        <Footer />
      </section>
    )
  }
  async componentDidMount () {
    this.getList()
  }
}